<template>
    <div class="mineImg">
      <img :src=headimg class="headimg"/>
    </div>
    <div class="reactMine">
        <div v-if="error">error loading button</div>
        <div v-else ref="root">loading button...</div>
    </div>
</template>

<script>
import { ref, onMounted} from 'vue';
import ReactDOM from 'react-dom';
import React from 'react';
async function fetchButton() {
  return (await import('reactChild/MineTop')).default;
}


export default{
    setup() {
      const root = ref(null);
      const error = ref(null);
      const headimg=require('../assets/headImg.jpg')
      onMounted(()=>{
          fetchButton()
            .then(b => {
              ReactDOM.render(React.createElement(b), root.value);
            })
            .catch(e => {
              error.value = e;
          });
      });
      return {  root,error,headimg};
    } 
}
</script>

<style>
.mineImg{
  width: 7.5rem;
  height: 2.1rem;
  padding-top: 1rem;
}
.headimg{
   width: 1.1rem;
   height: 1.1rem;
   object-fit: cover;
   border-radius: 1.1rem;
   margin:0 auto;
   display: block;
}
.reactMine{
    width:375px;
    height: 400px;
}   
</style>